<template>
  <div class="menu">
    <template v-for="(item, index) in muendata">
      <router-link :to="item.url" :key="index">
        <div
          class="menu-list"
          :class="{ active: active == index }"
          @click="()=>active=index "
        >
          <svg>
            <rect x="0" y="0" fill="none" width="100%" height="100%" />
          </svg>
          {{ item.moduleTypeName }}
        </div>
      </router-link>
    </template>
  </div>
</template>

<script>
import { getmenu } from "../api/test";
export default {
  data() {
    return {
      active: Number,
      muendata: [
        {
          id: 1,
          moduleTypeName: "所思",
          url: "/TheThink",
        },
        {
          id: 2,
          moduleTypeName: "所见",
          url: "/TheLook",
        },
        {
          id: 3,
          moduleTypeName: "所想",
          url: "/TheWant",
        },
      ],
    };
  }
};
</script>

<style scoped>
@import "../css/menu.css";
</style>
